<template>
  <view class="admin_box">
    <second></second>
    <view class="admin_main">
      <view class="admin_top">
        <view></view>
        <view class="right">
          <i class="iconfont icon-xinxi"></i>
          <i class="iconfont icon-guanli"></i>
        </view>
      </view>
      <view class="admin_userInfo_wrap">
        <view class="right">
          <view class="avater">
            <image mode="widthFix" :src="user_info.avatar" />
          </view>
        </view>
        <view class="left">
          <view class="username">{{user_info.username}}</view>
          <view class="touxian">
            <text>头衔 / 勋章</text>
            <image src="./../../static/touxian.png" />
            <!--暂无数据 -->
          </view>
          <view class="gongsi">所在企业: 广东共德信息科技有限公司</view>
          <!--暂无数据 -->
        </view>
      </view>

      <view class="weizhang">
        <image :src="user_info.sup_badge" />
      </view>
      <view
        class="rank_sup_bg"
        @click="$routerTo({url : user_info.rank_desc_link})"
        :style="{backgroundImage: 'url(' + user_info.rank_sup_bg + ')'}"
      >
        <view class="rank_sup_top">
          <view>注册会员</view>
          <view>权益</view>
        </view>
        <view class="zhanghao">{{user_info.card_no}}</view>
        <view class="create_time">{{user_info.create_time}}</view>
      </view>
    </view>
    <view class="action_block">
      <view
        class="action_item"
        v-for="(item,index) in action_block"
        :key="index"
        @click="$routerTo({data:item})"
      >
        <view class="action_value">{{item.value}}</view>
        <view class="action_name">{{item.name}}</view>
      </view>
    </view>
    <view class="order_block">
      <view
        class="order_item"
        v-for="(item,index) in order_block"
        :key="index"
        @click="$routerTo({data:item})"
      >
        <i :class="['iconfont',index== 0 ?'icon-xiaoshoudingdan':'icon-caigoudingdan']"></i>
        {{item.name}}
      </view>
    </view>

    <view class="admin_bottom">
      <view class="operate_block_wrap">
        <view
          class="operate_item"
          @click="$routerTo({data:item})"
          v-for="(item,index) in operate_block"
          :key="index"
        >
          <i :class="['iconfont',item.icon]"></i>
          <view class="operate_name">{{item.name}}</view>
        </view>
      </view>

      <view class="goods_block">
        <view class="goods_top">
          <view
            class="cartTotal"
            v-for="(item,index) in goods_block"
            :key="index"
            @click="$routerTo({data:item})"
          >
            <view class="right">{{item.name}}</view>
            <view class="left">
              <text>{{item.value}}</text>
              <i class="iconfont iconjiantou"></i>
            </view>
          </view>
        </view>
        <view class="goods_tongji">
          <view class="tongji_top">
            <h3>订单统计</h3>
            <text>采购 / 销售</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import second from "../../compontents/second/index";
export default {
  components: {
    second
  },
  data() {
    return {
      token: "",
      action_block: [],
      goods_block: [],
      operate_block: [],
      order_block: [],
      user_info: {}
    };
  },
  created() {
    this.token = wx.getStorageSync("userInfo").token;
    if (!this.token) {
      uni.navigateTo({
        url: "../login/index"
      });
    }
    this.$axios({
      url: "api/user/getUserSupplier",
      data: { token: this.token }
    }).then(res => {
      const { returnData } = res.data;
      this.action_block = returnData.action_block;
      this.goods_block = returnData.goods_block;
      returnData.operate_block.forEach(v => {
        switch (v.name) {
          case "新增销售":
            v.icon = "icon-xiaoshou";
            return;
          case "库存状态":
            v.icon = "icon-kucun";
            return;
          case "新增商品":
            v.icon = "icon-xinzengshangpinpinglun";
            return;
          case "新增客户":
            v.icon = "icon-kehu";
            return;
        }
      });
      this.operate_block = returnData.operate_block;
      this.order_block = returnData.order_block;
      this.user_info = returnData.user_info;
      console.log(this.user_info);
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.flex_box {
  height: 82rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin_box {
  position: relative;
  .admin_bottom {
    padding: 40rpx 30rpx 30rpx 30rpx;
    .goods_tongji {
      .tongji_top {
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3 {
          font-size: 30rpx;
          font-weight: 600;
          color: rgba(69, 69, 69, 1);
        }
        text {
          font-size: 22rpx;
          color: rgba(69, 69, 69, 1);
        }
      }
    }
    .goods_block {
      padding: 0rpx 30rpx 30rpx 30rpx;
      background: #fff;
      border-radius: 10rpx;
      .goods_top {
        border-bottom: 1px solid #ddd;
        height: 164rpx;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .cartNum,
        .cartTotal {
          @extend .flex_box;
          .left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text {
              font-size: 42rpx;
              color: rgba(50, 113, 239, 1);
            }

            i.iconfont.iconjiantou {
              margin-left: 10rpx;
            }
          }
        }
      }
    }
    .operate_block_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      height: 154rpx;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      .operate_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          font-size: 66rpx;
          margin-bottom: 10rpx;
          color: #3271ef;
        }
        .operate_name {
          font-size: 24rpx;
          color: rgba(69, 69, 69, 1);
        }
      }
    }
  }

  .order_block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    background: #fff;
    .order_item {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 1);
      width: 296rpx;
      height: 134rpx;
      background: #3271ef;
      border-radius: 10px;
      margin: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 46rpx;
        width: 60rpx;
      }
      &:nth-child(2) {
        background: #00a887;
        .iconfont {
          width: 70rpx;
        }
      }
    }
  }
  .action_block {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150rpx;
    .action_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .action_value {
        font-size: 42rpx;
        font-weight: bold;
        color: rgba(64, 122, 240, 1);
        margin-bottom: 10rpx;
      }

      .action_name {
        font-size: 24rpx;
        color: rgba(69, 69, 69, 1);
      }
    }
  }
  .admin_userInfo_wrap {
    display: flex;
    .right {
      margin-right: 30rpx;
      position: relative;
      .avater {
        width: 180rpx;
        image {
          width: 180rpx;
          height: 180rpx;
        }
      }
    }

    .left {
      .username {
        font-size: 36rpx;
        font-weight: 500;
        color: #fff;
        margin-bottom: 20rpx;
      }

      .touxian {
        display: flex;
        align-items: center;
        margin-bottom: 34rpx;
        text {
          font-size: 22rpx;
          color: #fff;
          margin-right: 12rpx;
        }
        image {
          width: 19rpx;
          height: 24rpx;
        }
      }

      .gongsi {
        font-size: 22rpx;
        color: #fff;
      }
    }
  }
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    height: 590rpx;
    width: 100%;
    background: #2b2d38;
    z-index: -1;
  }
  .admin_main {
    padding: 0rpx 52rpx 52rpx 52rpx;
    height: 590rpx;
    position: relative;
    .rank_sup_bg {
      position: absolute;
      background-size: cover;
      width: 472rpx;
      height: 272rpx;
      bottom: 0rpx;
      right: 20rpx;
      color: #7d4127;
      padding: 30rpx;
      .create_time {
        text-align: right;
        font-size: 24rpx;
        margin-top: 30rpx;
      }
      .rank_sup_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
      }
      .zhanghao {
        font-size: 33rpx;
        color: #7d4127;
      }
    }

    .weizhang {
      position: absolute;
      bottom: 0;
      z-index: 1;
      image {
        width: 150rpx;
        height: 150rpx;
      }
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0rpx;
      left: 0rpx;
      height: 89rpx;
      width: 750rpx;
      background: url("../../static/bottom999.png") no-repeat;
      background-size: cover;
    }
    .admin_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 126rpx;
      padding-right: 156rpx;
      padding-top: 46rpx;
      margin-bottom: 10rpx;
      .right {
        display: flex;
        justify-content: space-between;
        i.iconfont.icon-xinxi {
          color: #fff;
          margin-right: 30rpx;
          font-size: 44rpx;
        }

        i.iconfont.icon-guanli {
          color: #fff;
          font-size: 44rpx;
        }
      }
    }
  }
}
</style>